<template>
  <div class="game-container">
    <div class="game-left">
            <top-bar>
              <div class="top_bar">
                <div class="user-info">
                  <div class="user-image"></div>
                  <div class="user-info-ms">
                    <div class="user-info-title"><span>早上好！Song</span></div>
                    <div class="user-info-describe"><span>欢迎回来，今日上线三款游戏，快来看看吧！</span></div>
                  </div>
                </div>
                <theme :data=themes></theme>
              </div>

            </top-bar>

            <div class="game-content">
              <div class="game-content-top">
                <div class="label">
                  <div class="name"><span>游戏分类</span></div>
                  <a class="more" href="#">more</a>
                </div>
                <div class="game-category-list">
                  <div class="game-category-card" v-for="item in categoryData" :key="item.id">
                    <game-category-card :item="item"></game-category-card>
                  </div>

                </div>

              </div>
              <div class="game-content-middle">

                <div class="game-history-list">

                  <div class="game-history-card">
                    <div class="game-history-card-image item0">

                    </div>
                    <div class="game-history-card-info">
                      <span>PUBG</span>
                      <span>Lv .30</span>
                    </div>

                  </div>
                  <div class="game-history-card">
                    <div class="game-history-card-image item1">

                    </div>
                    <div class="game-history-card-info">
                      <span>QQ飞车</span>
                      <span>Lv .3</span>
                    </div>

                  </div>
                  <div class="game-history-card">
                    <div class="game-history-card-image item2">

                    </div>
                    <div class="game-history-card-info">
                      <span>穿越火线</span>
                      <span>Lv .5</span>
                    </div>

                  </div>
                </div>
              </div>
              <div class="game-content-bottom">
                <div class="game-label">
                  <div class="name"><span>竞技游戏 >></span></div>
                  <a class="more" href="#">more</a>
                </div>

                <div class="game-athletic-list">
                  <div class="game-athletic-card ">
                    <div class="game-athletic-image ath1"></div>
                    <div class="game-athletic-name">
                      穿越火线
                    </div>
                  </div>
                  <div class="game-athletic-card ">
                    <div class="game-athletic-image ath2"></div>
                    <div class="game-athletic-name">
                      QQ 飞车
                    </div>
                  </div>
                  <div class="game-athletic-card ">
                    <div class="game-athletic-image ath3"></div>
                    <div class="game-athletic-name">
                      绝地求生
                    </div>
                  </div>
                  <div class="game-athletic-card ">
                    <div class="game-athletic-image ath4"></div>
                    <div class="game-athletic-name">
                      篮球高手
                    </div>
                  </div>
<!--                  <div class="game-athletic-card ">-->
<!--                    <div class="game-athletic-image ath5"></div>-->
<!--                    <div class="game-athletic-name">-->
<!--                      魂之刃-->
<!--                    </div>-->
<!--                  </div>-->
                </div>
              </div>
            </div>
    </div>
    <div class="game-right">
      <div class="game-right-top">
        <div class="game-right-image"></div>
      </div>

      <div class="game-right-middle">
        <div class="game-right-info">
          <div class="game-name">
            双人成行
          </div>

          <div class="text-size">
            游玩《双人成行》，踏上生命中最疯狂的旅程，
            这是一款别开生面的平台冒险游戏，完全为合作模式而设计。
            利用好友通行证*邀请一位好友免费游玩，共同体验多种多样的乐趣，
            享受颠覆性的玩法挑战。扮演相互看不顺眼的科迪和小梅夫妇，
            这两个人被魔咒变成了玩偶。他们一起被困在一个奇幻世界里，
            每个角落都隐藏着意想不到的东西，他们不得不一起克服挑战，
            同时挽救他们破裂的关系。
          </div>
          <div class="game-rating-label">评分</div>
          <div class="book-rating-box">
            <div class="book-rating-info">
              <div class="chart">
                9
              </div>
              <div class="rating-label">
                用户评级
              </div>
            </div>

            <div class="book-rating-info">
              <div class="chart">
                9.8
              </div>
              <div class="rating-label">
                元评分
              </div>
            </div>
            <div class="book-rating-info">
              <div class="chart">
                9
              </div>
              <div class="rating-label">
                用户评分
              </div>
            </div>
          </div>
          <div class="game-video-label">
            预告片
          </div>
        </div>
      </div>

      <div class="game-right-bottom">
        <div class="game-right-video"></div>
      </div>

    </div>
  </div>
</template>

<script lang="ts" setup>
import TopBar from "@/components/top-bar.vue"
import Theme from "@/components/theme.vue"

import {themes} from "@/config/data";
import {reactive} from "vue";

import GameCategoryCard from "@/components/game-category-card.vue";

const data = reactive<Array<string>>(['hello', 'world'])


const categoryData = [
  {
    id: 0,
    label: '竞技',
    icon: '../src/assets/icons/sword.png',
    bg: '../src/assets/icons/game-bg3.png',
    numbers: '56233 人在线',
  }, {
    id: 1,
    label: '策略',
    icon: '../src/assets/icons/horse.png',
    bg: '../src/assets/icons/game-bg2.png',
    numbers: '56233 人在线',
  }, {
    id: 2,
    label: '冒险',
    icon: '../src/assets/icons/rocket.png',
    bg: '../src/assets/icons/game-bg1.png',
    numbers: '56233 人在线',
  },
]
</script>

<style lang="less" scoped>
.game-container {
  width: 100%;
  height: 100%;
  display: flex;
  gap: 10px;
  padding: 10px;

  .game-left {
    flex: 1;
    height: 100%;
    display: flex;

    flex-direction: column;

    .game-content {
      flex: 1;
      width: 100%;
      display: flex;
      flex-direction:column;

      .game-content-top {
        width: 100%;
        height: 45%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .game-category-list {
          width: 100%;
          flex: 1;
          display: grid;
          grid-template-columns: repeat(3, 1fr);

          .game-category-card {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: end;
            justify-content: center;
          }
        }

      }

      .game-content-middle {
        width: 100%;
        height: 20%;
        display: flex;
        padding: 0 10px;
        flex-direction: column;
        justify-content: space-between;

        .game-history-list {
          width: 100%;
          height: 100%;
          display: grid;
          gap: 20px;

          grid-template-columns: repeat(3, 1fr);

          .game-history-card {
            display: grid;
            color: white;
            height: 100%;
            margin-top: 10px;
            grid-template-columns: 3fr 2fr;


            .game-history-card-image {
              width: 100%;
              height: 100%;
              background-size: 100% 100%;
              border-radius: 10px;
              background-repeat: no-repeat;
              background-position: center center;
            }

            .item0 {
              background-image: url("@/assets/images/d20211116_3.png");
            }

            .item1 {
              background-image: url("@/assets/images/qqfly.jpg");
            }

            .item2 {
              background-image: url("@/assets/images/vf.jpg");
            }

            .game-history-card-info {
              display: flex;
              margin-left: 10px;;
              flex-direction: column;
              justify-content: space-evenly;
            }

            .game-history-card-info :nth-child(1) {
              font-size: 14px;
            }

            .game-history-card-info :nth-child(2) {
              font-size: 12px;
            }
          }
        }
      }

      .game-content-bottom {
        display: flex;
        height: 35%;
        margin-top: 10px;
        flex-direction: column;
        justify-content: space-between;
        .game-label{
          width: 100%;
          height: 20px;
          display: flex;
          margin-top: 10px;
          color: white;
          justify-content: space-between;
          padding-right:  20px;
          align-items: baseline;

          .more{
            text-decoration: none;
            color: white;
          }
        }

        .game-athletic-list {
          width: 100%;
          flex: 1;
          display: grid;
          padding: 10px;
          grid-column-gap: 10px;
          grid-template-columns: repeat(4, 1fr);

          .game-athletic-card {
            width: 100%;
            border-radius: 10px;
            position: relative;
            overflow: hidden;
           

            .game-athletic-image {
              background-position: center;
              width: 100%;
              height: 100%;
              position: relative;
              background-size: 100% 100%;
              top: 0;
              background-repeat: no-repeat;
              left: 0;

            }

            .ath1 {
              background-image: url("@/assets/images/vf.jpg");
            }

            .ath2 {
              background-image: url("@/assets/images/qqfly.jpg");
            }

            .ath3 {
              background-image: url("@/assets/images/d20211116_3.png");
            }

            .ath4 {
              background-image: url("@/assets/images/basketball.png");
            }

            .ath5 {
              background-image: url("@/assets/images/hunzhiren.png");
            }


            .game-athletic-name {
              width: 100%;
              height: 30px;
              text-align: center;
              position: absolute;
              left: 0;
              bottom: 0;
              color: white;
              backdrop-filter: blur(2px);
              background: url("@/assets/icons/transparent.png") rgba(0, 0, 0, 0.5);
            }
          }

        }
      }
    }
  }

  .game-right {
    width: 28%;
    height: 100%;
    color: white;
    border-radius: 15px;
    backdrop-filter: blur(2px);
    border: 2px solid #a9a9a9;
    padding: 10px 5px;
    background: url("@/assets/icons/transparent-big.png") rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;


    .game-right-top {
      width: 100%;
      height: 25%;


      .game-right-image {
        background: url("@/assets/images/shuangren.jpg") no-repeat center;
        width: 100%;
        height: 100%;
        background-size: 100% 100%;
        border-radius: 10px;
      }
    }

    .game-right-middle {

      width: 100%;
      height: 55%;

      .game-right-info {
        display: flex;
        height: 100%;
        padding: 10px 0;
        flex-direction: column;
        justify-content: space-between;

        .book-rating-box {
          width: 100%;
          display: flex;
          justify-content: space-evenly;
          align-items: center;

          .book-rating-info {
            width: 40px;
            height: 50px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;

            .chart {
              width: 40px;
              height: 40px;
              display: flex;
              align-items: center;
              justify-content: center;
              border: 3px solid #4576ff;
              border-radius: 50%;
              background-color: #524e9f;
              color: white;
            }

            .rating-label {
              font-size: 10px;
              color: white;
            }
          }
        }
      }

    }

    .game-right-bottom {
      width: 100%;
      height: 25%;

      .game-right-video {
        background: url("@/assets/images/3.jpg") no-repeat center;
        width: 100%;
        height: 100%;
        background-size: 100% 100%;
        border-radius: 10px;
      }
    }






  }
}

.top_bar {
  display: flex;
  -webkit-app-region: drag; //设置可拖拽，但是要在子组件不需要拖到的地方取消，不然会失焦
  align-content: center;
  justify-content: space-between;

  .user-info {
    display: flex;
    align-items: start;
    justify-content: space-evenly;

    .user-info-ms {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      color: white;
      margin-left: 15px;
      align-items: start;

      .user-info-title {
        font-size: 20px;
      }

      .user-info-describe {
        font-size: 14px;
      }
    }
  }

  .user-image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid white;
    background-image: url("@/assets/images/pic_5ijxAKSAYKErWtalMemh2.jpg");
    background-size: 40px 40px;
    background-position: center;
  }
}
</style>